import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
        <div className="flex-shrink-0">
          <img className="h-12 w-12" src={logo} alt="ChitChat Logo" />
        </div>
        <div>
          <div className="text-xl font-medium text-black">ChitChat</div>
          <p className="text-gray-500">You have a new message!</p>
        </div>
      </div>
      <div>
        <button class="hover:bg-purple-700 m-1 p-3">
          <img
            class="w-16 md:w-48 lg:w-52"
            src="https://images.unsplash.com/photo-1515711660811-48832a4c6f69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
            alt=""
          />
        </button>
      </div>
      <h1 class="hover-blue">hello i am fire</h1>
    </div>
  );
}

export default App;
